<template>
  <div class="login-bg">
    <div class="auth-form-container">
      <a-card class="auth-card" :bordered="false">
        <div class="auth-header">
          <div class="sheep-anim-box">
            <LottieAnimation
              :animation-path="'/sheep.lottie.json'"
              :loop="true"
              :auto-play="true"
              style="width: 80px; height: 80px; margin: 0 auto;"
            />
          </div>
          <h1 class="auth-title">
            <img src="/sheep.png" alt="小羊" class="sheep-title-icon" />
            小羊记账
          </h1>
          <p class="auth-subtitle">欢迎回来，请登录您的账户</p>
        </div>
        <a-form
          :model="form"
          :rules="rules"
          ref="formRef"
          @finish="onLogin"
          layout="vertical"
          size="large"
        >
          <a-form-item name="username" label="用户名">
            <a-input v-model:value="form.username" placeholder="请输入用户名">
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="password" label="密码">
            <a-input-password v-model:value="form.password" placeholder="请输入密码">
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-checkbox v-model:checked="rememberMe">记住我</a-checkbox>
            <a class="login-form-forgot" href="#">忘记密码？</a>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" :loading="loading" block size="large">
              <LoginOutlined /> 登录
            </a-button>
          </a-form-item>
          <div class="auth-actions">
            <span>还没有账号？</span>
            <router-link to="/register" class="auth-link">立即注册</router-link>
          </div>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { message } from 'ant-design-vue'
import {
  UserOutlined,
  LockOutlined,
  LoginOutlined
} from '@ant-design/icons-vue'
import LottieAnimation from 'vue3-lottie'

const formRef = ref()
const loading = ref(false)
const rememberMe = ref(false)
const router = useRouter()
const userStore = useUserStore()

const form = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

const onLogin = async () => {
  try {
    loading.value = true
    const res = await userStore.loginAction(form)
    if (res.data && res.data.code === 200) {
    message.success('登录成功')
    router.push('/')
    } else {
      message.error(res.data?.message || '登录失败，请检查用户名和密码')
    }
  } catch (error) {
    message.error(error.response?.data?.message || '登录失败，请检查用户名和密码')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  background: #5e35b1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-form-container {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.auth-card {
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 28px 18px;
  width: 100%;
  box-sizing: border-box;
  animation: fadeInUp 0.6s ease-out;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-title {
  font-size: 28px;
  font-weight: bold;
  color: #7d5c3e;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-subtitle {
  color: #a68b6a;
  font-size: 14px;
  margin: 0;
}

.login-form-forgot {
  float: right;
  color: #1890ff;
  text-decoration: none;
}

.login-form-forgot:hover {
  color: #40a9ff;
}

.auth-actions {
  text-align: center;
  margin-top: 16px;
  color: #666;
}

.auth-link {
  color: #1890ff;
  text-decoration: none;
  margin-left: 4px;
}

.auth-link:hover {
  color: #40a9ff;
}

.sheep-title-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  vertical-align: middle;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .auth-form-container {
    max-width: 98vw;
    padding: 0;
  }
  .auth-card {
    padding: 12px 4px;
    border-radius: 10px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
